<template>
  <div class="video">
    <div class="vide-input-top">
      <el-button
        slot="append"
        icon="el-icon-plus"
        @click="addInput"></el-button>
    </div>
    <div class="vide-input">
      <div
        class="vide-input-div"
        v-for="(item, index) in vList"
        :key="index">
        <el-input v-model="item.value"></el-input>
        <el-button
          slot="append"
          icon="el-icon-minus"
          @click="delInput(index)"></el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      vList: [],
    }
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      },
    },
  },
  watch: {
    value: {
      handler(newVal) {
        this.vList = newVal
      },
      deep: true,
    },
    vList: {
      handler(newVal) {
        this.$emit('input', newVal)
      },
      deep: true,
    },
  },
  mounted() {
    this.vList = this.value
  },
  methods: {
    addInput() {
      this.vList.push({
        value: '',
      })
    },
    delInput(index) {
      this.vList.splice(index, 1)
    },
  },
}
</script>

<style lang="scss" scoped>
.video {
  width: 100%;
  display: block;
}
.vide-input-top {
  display: flex;
  margin-bottom: 8px;
}
.vide-input {
  width: 100%;
  .vide-input-div {
    display: flex;
    margin-bottom: 8px;

    .tip {
    }
  }
}
.video-button {
  margin-left: 10px;
}
</style>
